<template>
  <div class="">
<!-- 电脑端banner -->
    <div class="pCBanner">
      <img class="bannerx" src="../assets/images/banner2@2x.jpg" style="height: 230px;">

      <div class="tuandetial">
        <div class="container">
          <div class="AuctionCom">
            <div class="tuandetialRight">
              <img :src="user.headpic" alt="" style="border-radius: 50%;">
              
            </div>
            <div class="Auctionright">
              <div class="AuctionrightTop">
                <p style="margin-right: 10px;">{{user.username}}</p>
                <p>
                  <!-- <img src="../assets/images/icon5@2x.png" >
                  {{info.read_count > 0 ? info.read_count : '0'}}人 浏览 -->
                </p>
              </div>
              <div class="zypnav">
                <div class="AuctionrightTop">
                  <!-- <p style="margin-right: 10px;">{{user.username}}</p> -->
                  <p>
                    <img src="../assets/images/icon5@2x.png" >
                    {{info.read_count > 0 ? info.read_count : '0'}}人 浏览
                  </p>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    <!-- 拍卖详情内容开始 -->
    <div class="TunaCom">
      <div class="container">
        <div class="TunaComTop">
          活动详情
        </div>
        <div class="TunaComConser" style="display: flex;justify-content: space-between;align-items: flex-start;">
          <p class="delspm1" v-html="info.content" style="width: 70%;flex-shrink: 0;"></p>
          <div style="width: 20%;flex-shrink: 0;" class="delspm2">
            <span class="text1" style="color: rgb(255, 0, 0) !important">￥</span>
            <span class="text2" style="color: rgb(255, 0, 0) !important">{{info.type == 3 ? info.min_price : info.want_price}}</span>
            <span class="text1" v-if="info.type == 2" style="color: rgb(255, 0, 0) !important">(求购价)</span>
            <span class="text1" v-if="info.spec_type == 2" style="rgb(255, 0, 0) !important">起</span>
            <span class="text3" style="color: #333;" v-if="info.type == 3">{{info.send_goods_name}}</span>
          </div>
        </div>
        <img v-for="(item,index) in info.content_pic" :src="item" alt="">
        <div style="line-height: 50px;font-size: 16px;">
          发布时间： {{info.create_time}}
        </div>
      </div>
    </div>
    
    <div class="boxqrcodeurl" @touchstart="touchStart(info.qrcodeurl)" @touchend="touchEnd()">
      <img :src="info.qrcodeurl" alt="">
      <div>
        <p>微</p>
        <p>信</p>
        <p>扫</p>
        <p>码</p>
        <p>进</p>
        <p>入</p>
        <!--<p v-if="type==1">拍</p>
        <p v-if="type==1">卖</p>
        <p v-if="type==2">团</p>
        <p v-if="type==2">购</p> -->
      </div>
    </div>

    <!-- 拍卖详情内容结束 -->
  </div>
</template>

<script>
  import { CircleInfo } from '@/api/utils.js'
  export default {
    name: '',
    components: {},
    props: [],
    data() {
      return {
        id: '',
        user: {},
        info: {},
      }
    },
    computed: {},
    watch: {},
    created() {
      this.id = this.$route.query.id
      this.getCircleInfo()
    },
    beforeRouteLeave(to, from, next) {
      sessionStorage.setItem('type',this.$route.query.type)
      sessionStorage.setItem('page',this.$route.query.page)
      next();
    },
    mounted() {},
    methods: {
      getCircleInfo() {
        var that = this,
        params = {
          id: this.id
        }
        CircleInfo(params).then(res => {
          if (res.Code == 1) {
            this.user = res.data.user
            this.info = res.data.info
            // let text = res.data.info.content,
            // replace = text.replace(/<[^>]+>/g,""),
            // replace1= replace.replace(/&nbsp;/ig, '')
            // this.content = replace1
          }
        })
      },
      touchEnd() {
        //手指离开
        clearTimeout(this.timer);
      },
      touchStart(e) {
        //手指触摸
        clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
        this.timer = setTimeout(() => {
          this.downloadIamge(e, "微藏汇");
        }, 1000);
      },
      downloadIamge(imgsrc, name) {
        //下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = () => {
          let canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
          let a = document.createElement("a"); // 生成一个a元素
          let event = new MouseEvent("click"); // 创建一个单击事件
          a.download = name || "photo"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../assets/css/basic.css");
  @import url("../assets/css/media.css");
  .tuandetialLefts{
    font-size: 1.95vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #110701;
  }
  .AuctionrightTop p:last-of-type{
    flex-shrink: 0;
  }
  .container{
    padding-top: 50px;
  }
  .zypnav{
    margin-top: 30px;
    color: #ff0000;
  }
  .text1{
    font-weight: bold;
  }
  .text2{
    font-size: 42px;
    font-weight: bold;
  }
  .text3{
    display: inline-block;
    margin-left: 10px;
  }
  @media only screen and (min-width: 100px) and (max-width: 998px) {
    .bannerx{
      height: 105px!important;
    }
    .zypnav{
      margin-top: 0!important;
    }
    .delspm1{
      width: 60%!important;
    }
    .delspm2{
      width: 30%!important;
    }
  }
</style>